<template>
	<view class="yhq-div">
		<u-mask :show="show">
			<view class="flex flex_cen yhq-div-main">
				<view class="yh-d">
					<image class="yhq-top" src="../../static/img/home/yhq-top.png" mode=""></image>
					<image class="closeimg" src="../../static/img/home/closeimg.png" mode="" @click="close"></image>
					<view class="font_weight font_20_333 u-m-t-22 text_center p-text">
						恭喜获得用户好礼
					</view>
					<view class="yhq-bg-div">
						<image class="yhq-bg" src="../../static/img/home/yhq-bg.png" mode=""></image>
						<view class="yhq-text flex flex_sb">
							<view class="yhq-text-num">
								<span class="num-fh">￥</span>
								<span class="num-mo">{{yhqlist.jian_price}}</span>
							</view>
							<view class="yhq-text-ri">
								<view class="ri-1">
									优惠券
								</view>
								<view class="ri-2">
									满{{yhqlist.man_price}}元可用
								</view>
							</view>
						</view>
					</view>
					<view class="flex x-btn flex_cen"  @click="lingqu">
						<image class="szt-img" src="../../static/img/home/c4.png" mode=""></image>
						<view class="xiadan">
							立即领取
						</view>
					</view>
				</view>
				
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		name: "youhui",
		data() {
			return {
				show:true
			};
		},
		props: {
			yhqlist: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		methods:{
			close(){
				this.$emit("close")
			},
			lingqu(){
				this.close()
				this.$api({
					url: '/addUserYhq',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						yhq_id:this.yhqlist.id
					},
				}).then(res => {
					
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '领取成功',
						});
						
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.x-btn{
		position: absolute;
		width: 536rpx;
		height: 92rpx;
		background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		bottom: 30rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		left: 22rpx;
		.szt-img{
			position: absolute;
			right:66rpx ;
			top: 14rpx;
			width: 72rpx;
			height: 64rpx;
		}
	}
	.yhq-bg-div{
		position: absolute;
		bottom: 150rpx;
		width: 536rpx;
		height: 260rpx;
		left: 20rpx;
		.yhq-bg{
			width: 536rpx;
			height: 260rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.yhq-text{
			width: 536rpx;
			height: 260rpx;
			position: absolute;
			top: 0;
			left: 0;
			padding: 86rpx 72rpx;
			color: #FFFFFF;
			
			.yhq-text-num{
				font-weight: bold;
				.num-fh{
					font-size: 26rpx;
				}
				.num-mo{
					
					font-size: 40rpx;
					
				}
			}
			.yhq-text-ri{
				.ri-1{
					font-size: 40rpx;
					font-weight: bold;
				}
				.ri-2{
					font-size: 28rpx;
				}
			}
		}
	}
	.yhq-div{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999999999999999;
		.yhq-div-main{
			position: relative;
			width: 660rpx;
			height: 100%;
			
			.yhq-top{
				width: 508rpx;
				height: 398rpx;
				// margin: 0 auto;
				// margin-top: -200rpx;
				position: absolute;
				top: -276rpx;
				left: 30rpx;
			}
			.yh-d{
				width: 100%;
				height: 632rpx;
				background: linear-gradient( 180deg, #FFECEA 0%, #FFFFFF 100%);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				position: relative;
				margin-left: 90rpx;
				
				.closeimg{
					position: absolute;
					right: 24rpx;
					top: 24rpx;
					width: 28rpx;
					height: 28rpx;
				}
				.p-text{
					position: absolute;
					top: 114rpx;
					left: 120rpx;
				}
			}
		}
		
	}

</style>